<template>
    <div class="top clearfix">
        <el-button
            type="text"
            size="default"
            :icon="isCollapse == false ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
            class="slideBtn"
            @click="switchMenu"
        ></el-button>

		<!-- 面包屑 -->
        <el-breadcrumb separator="/" class="pos">
			<el-breadcrumb-item v-if="$route.path === '/Home'">首页</el-breadcrumb-item>
			
			<el-breadcrumb-item v-else v-for="(item, index) in breadList" :key="index">
				{{item.meta.title}}
			</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="topRight clearfix">
            <el-avatar
                shape="square"
                size="large"
                :src="squareUrl"
                class="avatar"
            ></el-avatar>

            <el-dropdown class="slideDown" @command="handleCommand">
                <span class="el-dropdown-link" style="cursor: pointer">
                    下一次的约定<i
                        class="el-icon-arrow-down"
                        style="padding-left: 10px"
                    ></i>
                </span>

                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                        icon="el-icon-user"
                        command="goPersonInformation"
                        >个人中心</el-dropdown-item
                    >
                    <el-dropdown-item
                        icon="el-icon-switch-button"
                        command="logOut"
                        >退出登录</el-dropdown-item
                    >
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import { popUpMsg, comfirmPopUp } from "@/utils/util";

export default {
    data() {
        return {
			squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",		// 默认头像
			breadList: [],																			// 面包屑
        };
    },

    computed: {
        ...mapState(["isCollapse", "menuList"]),
	},
	
	watch: {
		// 监听路由
		$route(val) {
			// 调用获取路由数组方法
			this.getBreadList(val);
		}
	},

    methods: {
        getBreadList(val) {
            // 过滤路由matched对象
            if (val.matched) {
                let matched = val.matched.filter(
                    (item) => item.meta && item.meta.title
                );
                // 拿到过滤好的路由v-for遍历出来
                this.breadList = matched;
            }
        },

        // 展开 && 收起左侧菜单
        switchMenu() {
            let that = this;

            that.$store.commit("switchMenu");
        },

        // 鼠标移动到头像旁边时，点击下拉中的某一项触发的回调
        handleCommand(command) {
            let that = this;

            switch (command) {
                case "logOut":
                    that.logOut();
                    break;
            }
        },

        // 退出登录
        logOut() {
            let that = this;

            comfirmPopUp(
                "warning",
                "您确定要退出登录吗？",
                "退出登录",
                () => {
                    popUpMsg("success", "退出成功！", 2000);
                    setTimeout(() => {
                        that.$router.push({
                            path: "/",
                        });
                    }, 2000);
                },
                () => {
                    popUpMsg("success", "已取消退出登录！", 3000);
                }
            );
        },
    },

    created() {},
};
</script>

<style scoped>
@import "../assets/css/common.css";

.top {
    width: 100%;
    height: 50px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03);
}

.top .slideBtn {
    float: left;
    font-size: 24px;
    margin: 0 15px;
}

.top .pos {
    float: left;
    margin: 0 0 0 5px;
    line-height: 50px;
}

.top .topRight {
    float: right;
    margin: 0 20px 0 0;
}

.top .topRight .logoutBtn {
    line-height: 26px;
}

.top .topRight .avatar {
    float: left;
    margin: 5px 0 0 0;
}

.top .topRight .slideDown {
    float: left;
    margin: 16px 0 0 15px;
}
</style>
